<template>
  <div class="licence-review">
    <div class="title-wrap">
      <RouteHeadLine />
      <div class="search-wrap">
        <el-form :model="params" label-width="auto">
          <el-row :gutter="50" style="margin-top: 30px">
            <el-col :span="6">
              <el-form-item label="行政区划：">
                <el-tree-select
                  v-model="params.district"
                  :data="adminAreaList"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业名称：">
                <el-input v-model="params.customername" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6"
              ><el-form-item label="开始日期：">
                <el-date-picker
                  v-model="params.startdate"
                  type="date"
                  clearable
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                /> </el-form-item
            ></el-col>
          </el-row>

          <el-row :gutter="50">
            <el-col :span="6"
              ><el-form-item label="结束日期：">
                <el-date-picker
                  clearable
                  v-model="params.enddate"
                  type="date"
                  placeholder="请选择"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                /> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="审核状态：">
                <el-select
                  v-model="params.permitstatus"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in permitstatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label="是否新证：">
                <el-select
                  v-model="params.newflag"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in evidenceList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-button type="primary" @click="getList"
                ><el-icon style="color: #fff; margin-right: 5px"
                  ><Search /></el-icon
                >查询</el-button
              >
              <!-- <el-button
                type="danger"
                style="margin-left: 24px"
               
                @click="handleDelete"
                ><el-icon style="color: #fff; margin-right: 5px"
                  ><Delete /></el-icon
                >删除</el-button
              > -->
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="data-wrap">
      <el-table
        :show-overflow-tooltip="true"
        :data="tableData"
        border
        class="table-height"
        style="width: 100%"
      >
        <el-table-column align="center" type="selection" width="60" />
        <el-table-column
          prop="certificationcode"
          align="center"
          label="许可证编号"
        />
        <el-table-column
          prop="enterprisename"
          align="center"
          label="企业名称"
        />
        <el-table-column
          prop="certificationdepartment"
          align="center"
          label="发证机关"
        />
        <el-table-column
          prop="validdatestr"
          align="center"
          label="有效时间"
          width="150"
        />

        <el-table-column prop="" align="center" label="许可证状态" width="140">
          <template #default="{ row }">
            <div>
              {{ row.certificationstatus == 1 ? "有效" : "无效" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核状态" width="140">
          <template #default="{ row }">
            <div
              :style="
                row.permitstatus == 0
                  ? 'color:#fa0808;'
                  : row.permitstatus == 1
                  ? 'color:#0874FA;'
                  : 'color:#fa0808;'
              "
            >
              <!-- 未审核//#0874FA #fa0808-->
              {{
                row.permitstatus == 0
                  ? "未审核"
                  : row.permitstatus == 1
                  ? "通过"
                  : "不通过"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updatetime" align="center" label="提交时间" />
        <el-table-column prop="address" align="center" label="操作" width="180">
          <!-- b #CEE3FE    c  #0874FA   审核-->
          <template #default="{ row }">
            <div
              style="
                display: flex;
                justify-content: space-around;
                align-items: center;
              "
            >
              <button
                @click="searchDetail(row)"
                style="
                  width: auto;
                  padding: 8px 12px 10px 12px;
                  background: #e5efff;
                  color: #0874fa;
                "
              >
                详情
              </button>
              <button
                @click="handleAudit(row.id, row)"
                style="
                  width: auto;
                  padding: 8px 12px 10px 12px;
                  background: #fee6ce;
                  color: #fa6908;
                "
              >
                审核
              </button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-right: 60px; margin-top: 25px">
        <Pagination
          v-model:currentPage="params.page"
          :total="total"
          v-model:page-size="params.pagesize"
        />
      </div>
    </div>
    <Dialog
      diaWidth="50"
      diaTop="8"
      v-model:showDialog="showDialog"
      headerName="审核"
      @save="diaSave"
    >
      <template #content>
        <div class="content">
          <el-form
            :model="form"
            ref="formRef"
            label-width="165px"
            :rules="rules"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="资质证书：">
                  <img
                    @click="searchImg(imgObj.creditimageurl)"
                    class="img"
                    :src="imgObj.creditimageurl"
                    alt=""
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="营业执照：">
                  <img
                    @click="searchImg(imgObj.permitwasteimageurl)"
                    class="img"
                    :src="imgObj.permitwasteimageurl"
                    alt=""
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="守法证明：">
                  <img
                    class="img"
                    @click="searchImg(imgObj.lawimageurl)"
                    :src="imgObj.lawimageurl"
                    alt=""
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="审核状态：" prop="permitstatus">
                  <el-select
                    v-model="form.permitstatus"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      class="dia-select-item"
                      v-for="item in permitstatusList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="备注：">
              <el-input
                clearable
                v-model="form.permitremark"
                :rows="5"
                type="textarea"
                placeholder="请输入"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
    </Dialog>
    <!-- 查看详情 -->
    <Dialog
      diaWidth="45"
      diaTop="8"
      v-model:showDialog="showDetailDialog"
      headerName="详情"
      :footerShow="false"
    >
      <template #content>
        <div class="content-detail">
          <el-row>
            <el-col :span="12">
              <div class="detail-item f">
                <div class="left">企业名称：</div>
                <div class="right">
                  {{ detailMsg.enterprisename }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <div class="left">许可证编号：</div>
                <div class="right">
                  {{ detailMsg.certificationcode }}
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="detail-item">
                <div class="left">发证机关：</div>
                <div class="right">
                  {{ detailMsg.certificationdepartment }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <div class="left">有效时间：</div>
                <div class="right">
                  {{ detailMsg.validdatestr }}
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="detail-item">
                <div class="left">许可证状态：</div>
                <div class="right">
                  {{ detailMsg.certificationstatus == 1 ? "有效" : "无效" }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <div class="left">审核状态：</div>
                <div class="right">
                  {{
                    detailMsg.permitstatus == 0
                      ? "未审核"
                      : detailMsg.permitstatus == 1
                      ? "通过"
                      : "不通过"
                  }}
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="detail-item">
                <div class="left">资质证书：</div>
                <div class="right">
                  <img
                    @click="searchImg(detailMsg.creditimageurl)"
                    class="img"
                    :src="detailMsg.creditimageurl"
                    alt=""
                  />
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <div class="left">营业执照：</div>
                <div class="right">
                  <img
                    @click="searchImg(detailMsg.permitwasteimageurl)"
                    class="img"
                    :src="detailMsg.permitwasteimageurl"
                    alt=""
                  />
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <div class="detail-item">
                <div class="left">守法证明：</div>
                <div class="right">
                  <img
                    class="img"
                    @click="searchImg(detailMsg.lawimageurl)"
                    :src="detailMsg.lawimageurl"
                    alt=""
                  />
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="detail-item">
                <div class="left">提交时间：</div>
                <div class="right">
                  {{ detailMsg.updatetime }}
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="detail-item">
                <div class="left">备注：</div>
                <div class="right">
                  {{ detailMsg.permitremark }}
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </template>
    </Dialog>
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="showImg"
      @close="showImg = false"
      :url-list="srcList"
    />
  </div>
</template>
<script setup lang="ts">
import Pagination from "@/components/Pagination.vue";
import RouteHeadLine from "@/components/RouteHeadLine.vue";
import Dialog from "@/components/Dialog.vue";
import http from "@http";
import ElMessage from "@/components/ElMessage.js";
import changeArea from "@/utils/changeArea";
let params = reactive({});
let handleSearch = () => {};
let total = ref(11);
let showImg = ref(false);
let srcList = ref([]);
let showDetailDialog = ref(false);
let evidenceList = ref([]);
let detailMsg = ref({});
let imgObj = reactive({});
let ids = ref("");
let adminAreaList = ref([]);
let formRef = ref(null);
let showDialog = ref(false);
let form = reactive({});
let options = ref([
  { label: "佛挡杀", value: 2 },
  { label: "佛挡杀", value: 2 },
]);
let handleAudit = (id, row) => {
  imgObj.creditimageurl = row.creditimageurl;
  imgObj.permitwasteimageurl = row.permitwasteimageurl;
  imgObj.lawimageurl = row.lawimageurl;
  ids.value = id;
  showDialog.value = true;
  form.permitstatus = "";
  form.permitremark = "";
};
let searchDetail = (row) => {
  showDetailDialog.value = true;
  detailMsg.value = row;
};
let rules = {
  permitstatus: [
    { required: true, message: "请选择审核状态", trigger: "change" },
  ],
};
let searchImg = (url) => {
  srcList.value = [url];
  showImg.value = true;
};
let diaBack = () => {
  showDialog.value = false;
};
let diaSave = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      http({
        url: "/admPCEnterpriseLicense/doPermitLicense",
        data: { ...form, id: ids.value },
      }).then((res) => {
        if (res.code == 0) {
          showDialog.value = false;
          getList();
        }
      });
    }
  });
};
let tableData = ref([]);
let permitstatusList = ref([]);

http({ url: "/region/datalisttree" }).then((res) => {
  console.log(res, "res");
  if (res.code == 0) {
    adminAreaList.value = changeArea(res.data);
  }
});
let getList = () => {
  http({ url: "/admPCEnterpriseLicense/datalist", data: params }).then(
    (res) => {
      if (res.code == 0) {
        tableData.value = res.data.list;
    
        total.value = res.data.total;
        
        ElMessage({ msg: "查询成功" });
      }
    }
  );
};
getList();
let handleDelete = () => {};
http({ url: "/listitem/getmodule", data: { module: "B07" } }).then((res) => {
  if (res.code == 0) {
    evidenceList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
http({ url: "/listitem/getmodule", data: { module: "B12" } }).then((res) => {
  if (res.code == 0) {
    permitstatusList.value = res.data.map((item) => {
      return {
        label: item.name,
        value: item.id,
      };
    });
  }
});
</script>
<style lang="scss" scoped>
.licence-review {
  width: 100%;
  height: 100%;
  padding-left: 8px;
  overflow: hidden;
  .title-wrap {
    height: 192px;
    background: #ffffff;
    padding-top: 20px;

    /* width: 100%; */
    .search-wrap {
      padding-left: 35px;
      padding-right: 43px;
    }
  }
  .content {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .data-wrap {
    margin-top: 10px;
    width: 100%;
    height: calc(100vh - 80px - 10px - 192px);
    background: #fff;
    padding: 10px 8px 0 8px;
    .table-height {
      max-height: calc(100vh - 41.1vh);
      overflow-y: scroll;
      button {
        width: 115px;
        height: 39px;
        background: #e5efff;
        border-radius: 5px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 20px;
        color: #0874fa;
      }
    }
  }
  .img {
    width: 180px;

    height: 125px;
    border-radius: 2px;
  }
  .content-detail {
    padding-left: 30px;
  }
  .detail-item {
    display: flex;
    align-items: center;
    margin-top: 30px;
    line-height: auto;
    .left {
      width: 120px;
      text-align: right;
      color: #333333;
      font-weight: 500;
      font-size: 20px;
      flex-shrink: 0;
      align-self: flex-start;
      line-height: 28px;
    }
    .right {
      text-align: left;
      color: #333333;
      font-weight: 500;
      font-size: 20px;
      align-self: center;
      line-height: 28px;
      flex: 1;

      img {
        width: 140px;
        height: 115px;
        border-radius: 2px;
        cursor: pointer;
      }
    }
  }
}
</style>
